<template>
  <div class="wrap" id="wrap">
    <slot></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tar: 0,
      tarY: 0,
      endX: 0,
      dist: 0,
      onTab: false
    }
  },
  props: ['top'],
  computed: {
    wrap () {
      return document.getElementById('wrap')
    },
    tabClick () {
      return this.wrap.querySelectorAll('.tabClick')[0]
    },
    tabLi () {
      return this.tabClick.getElementsByTagName('li')
    },
    tabBox () {
      return this.wrap.querySelectorAll('.tabBox')[0]
    },
    tabList () {
      return this.tabBox.querySelectorAll('.tabList')
    },
    lineBorder () {
      return this.wrap.querySelectorAll('.lineBorder')[0]
    },
    lineDiv () {
      return this.lineBorder.querySelectorAll('.lineDiv')[0]
    },
    len () {
      return this.tabList.length
    },
    windowWidth () {
      return document.body.clientWidth
    },
    windowHeight () {
      return document.body.clientHeight
    },
    stars () {
      return this.wrap.querySelector('.active').start
    }
  },
  methods: {
    init () {
      var self = this
      var height = this.windowHeight
      var rem = document.documentElement.clientWidth / 7.5
      var top = this.top * rem

      this.tabBox.style.overflow = 'hidden'
      this.tabBox.style.position = 'relative'
      this.tabBox.style.width = this.windowWidth * this.tabList.length + 'px'
      // console.log(this.tabBox.style.width)
      for (let i = 0; i < this.len; i++) {
        this.tabList[i].style.width = this.windowWidth + 'px'
        this.tabList[i].style.height = height - top + 'px'
        this.tabList[i].style.float = 'left'
        this.tabList[i].style.float = 'left'
        this.tabList[i].style.padding = '0'
        this.tabList[i].style.margin = '0'
        this.tabList[i].style.verticalAlign = 'top'
        this.tabList[i].style.display = 'table-cell'
      }

      for (let i = 0; i < this.len; i++) {
        this.tabLi[i].start = i
        this.tabLi[i].onclick = function () {
          var star = this.start
          for (let i = 0; i < self.len; i++) {
            self.tabLi[i].className = ''
          }
          // console.log(self.tabLi, star)
          self.tabLi[star].className = 'active'
          self.lineAnme(self.lineDiv, self.windowWidth / self.len * star)
          self.translate(self.tabBox, self.windowWidth, star)
          self.endX = -star * self.windowWidth
          self.$emit('onTab', star)
        }
      }

      this.tabBox.addEventListener('touchstart', this.chstart, false)
      this.tabBox.addEventListener('touchmove', this.chmove, false)
      this.tabBox.addEventListener('touchend', this.chend, false)
    },
    gotoTab (star) {
      var self = this
      for (let i = 0; i < self.len; i++) {
        self.tabLi[i].className = ''
      }
      self.tabLi[star].className = 'active'
      self.lineAnme(self.lineDiv, self.windowWidth / self.len * star, 'false')
      self.translate(self.tabBox, self.windowWidth, star, 'false')
      self.endX = -star * self.windowWidth
      self.$emit('onTab', star)
    },
    chstart (ev) {
      //                ev.preventDefault()
      var touch = ev.touches[0]
      this.tar = touch.pageX
      this.tarY = touch.pageY
    },
    chmove (ev) {
      var touch = ev.touches[0]
      var distance = touch.pageX - this.tar
      var distanceY = touch.pageY - this.tarY
      this.dist = distance
      if (Math.abs(distanceY) > Math.abs(distance)) {
        this.onTab = false
        return
      }
      ev.preventDefault()
      this.onTab = true
      this.touchs(this.tabBox, this.windowWidth, this.tar, distance, this.endX)
      this.lineAnme(this.lineDiv, -this.dist / this.len - this.endX / this.len)
      this.tabBox.style.webkitTransition = 'all 0s ease-in-out'
      this.tabBox.style.transition = 'all 0s ease-in-out'
    },
    chend (ev) {
      var str = this.tabBox.style.transform
      var strs = JSON.stringify(str.split(',', 1))
      this.endX = Number(strs.substr(14, strs.length - 18))
      if (!this.onTab) {
        return
      }
      if (this.endX > 0) {
        this.back(this.tabBox, this.windowWidth, this.tar, 0, 0, 0.3)
        this.endX = 0
      } else if (
        this.endX <
        -this.windowWidth * this.tabList.length + this.windowWidth
      ) {
        this.endX = -this.windowWidth * this.tabList.length + this.windowWidth
        this.back(this.tabBox, this.windowWidth, this.tar, 0, this.endX, 0.3)
      } else if (this.dist < -this.windowWidth / this.len) {
        this.OnTab(this.tabClick.querySelector('.active').start + 1)
        this.back(this.tabBox, this.windowWidth, this.tar, 0, this.endX, 0.3)
      } else if (this.dist > this.windowWidth / (this.len + 1)) {
        this.OnTab(this.tabClick.querySelector('.active').start - 1)
      } else {
        this.OnTab(this.tabClick.querySelector('.active').start)
      }
      this.dist = 0
      // debugger
      var stars = this.wrap.querySelector('.active').start
      this.lineAnme(this.lineDiv, stars * this.windowWidth / this.len)
    },
    translate (obj, windowWidth, star, anim) {
      obj.style.webkitTransform =
        'translate3d(' + -star * windowWidth + 'px,0,0)'
      obj.style.transform = 'translate3d(' + -star * windowWidth + ',0,0)px'
      if (anim === 'false') {
        return
      }
      obj.style.webkitTransition = 'all 0.3s ease-in-out'
      obj.style.transition = 'all 0.3s ease-in-out'
    },
    touchs (obj, windowWidth, tar, distance, endX) {
      obj.style.webkitTransform =
        'translate3d(' + (distance + endX) + 'px,0,0)'
      obj.style.transform = 'translate3d(' + (distance + endX) + ',0,0)px'
    },
    lineAnme (obj, stance, anim) {
      obj.style.webkitTransform = 'translate3d(' + stance + 'px,0,0)'
      obj.style.transform = 'translate3d(' + stance + 'px,0,0)'
      if (anim === 'false') {
        return
      }
      obj.style.webkitTransition = 'all 0.1s ease-in-out'
      obj.style.transition = 'all 0.1s ease-in-out'
    },
    back (obj, windowWidth, tar, distance, endX, time) {
      obj.style.webkitTransform =
        'translate3d(' + (distance + endX) + 'px,0,0)'
      obj.style.transform = 'translate3d(' + (distance + endX) + ',0,0)px'
      obj.style.webkitTransition = 'all ' + time + 's ease-in-out'
      obj.style.transition = 'all ' + time + 's ease-in-out'
    },
    OnTab (star) {
      if (star < 0) {
        star = 0
      } else if (star >= this.len) {
        star = this.len - 1
      }
      for (let i = 0; i < this.len; i++) {
        this.tabLi[i].className = ''
      }

      this.tabLi[star].className = 'active'
      this.translate(this.tabBox, this.windowWidth, star)
      this.endX = -star * this.windowWidth
      this.$emit('onTab', star)
    }
  },
  mounted () {
    var index = this.$route.query.index
    this.init()
    if (index) {
      this.gotoTab(index)
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.wrap {
  height: 100%;
  .tabCon {
    height: 100%;
  }
}
.tabItem {
  position: absolute;
  z-index: 999;
  width: 100%;
}
.tabClick {
  background: #fff;
  overflow: hidden;
  border-bottom: 1px solid #e0e0e0;
}

.tabClick li {
  position: relative;
  -webkit-box-flex: 1;
  flex: 1;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.28rem;
  text-align: center;
}

.tabClick li.active {
  color: $themeColor;
  transition: 0.2s;
}

.tabCon {
  overflow: hidden;
  /*overflow-y: scroll*/
}

.tabBox {
  position: relative;
}

.tabList {
  word-break: break-all;
  width: 100%;
  float: left;
  min-height: 1rem;
  color: #d3d3d3;
  background-color: #f3f4f6;
  overflow-y: scroll;
}

.lineBorder {
  position: absolute;
  top: 0.8rem;
  width: 100%;
  height: 0.04rem;
  overflow: hidden;
}

.lineDiv {
  background: $themeColor;
  height: 0.04rem;
  /*transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, all 0.3s cubic-bezier(0.35, 0, 0.25, 1) !important*/
}
</style>
